import React from 'react';
import ReactDOM from 'react-dom';
import mirror, { connect, actions } from 'mirrorx';
import { Carousel, WhiteSpace, WingBlank, List } from 'antd-mobile';

const Item = List.Item;
const Brief = Item.Brief;


class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            barWidth: "auto",
            productTypeList: [],
            productList: [],
            typeCode:''
        }      
    }

    componentDidMount() {       
        this.requestFusionList();
        const productTypeList = [
            {name:'All',code:1},
            {name:'Hot',code:2},
            {name:'Persion',code:3},
            {name:'Annuity',code:4},
            {name:'Periodic',code:5},
            {name:'Healthy',code:6}
        ];
        this.setState({ productTypeList:productTypeList,typeCode:productTypeList[0].code}, () => {
            this.setBarWidth();
        })

        T.loginAction();
    }
    requestFusionList =()=>{
        T.fetchFusion({
            url:'/promotion/queryChannelGoodsList',
            data:{
              "partnerId":1005013,
               pageIndex:1,
               pageSize:1         
            }
          }).then((res)=>{        
            if(res.value){
              this.setState({          
                productList:res.value.resultList ||[]
              })
            }     
          })
        // var p1 = T.fetchFusion({
        //   url:'/promotion/queryChannelGoodsList',
        //   data:{
        //     "partnerId":1005012,
        //      pageIndex:1,
        //      pageSize:1         
        //   }
        // }).then((res)=>{        
        //   if(res.value){
        //     return res.value.resultList[0] || {}
        //   }     
        // })
        // var p2 = T.fetchFusion({
        //   url:'/promotion/queryChannelGoodsList',
        //   data:{
        //     "partnerId":1005013,
        //      pageIndex:1,
        //      pageSize:1         
        //   }
        // }).then((res)=>{        
        //   if(res.value){
        //     return res.value.resultList[0] || {}
        //   }     
        // })     
        // Promise.all([p1, p2]).then(values => { 
        //   console.log(values);
        //   this.setState({          
        //     productList:values || []
        //   })
        // })      
      }  

    setBarWidth = () => {
        let scrollBar = T.get("scrollBar");
        let children = scrollBar.children;
        let len = 0;
        for (let i = 0; i < children.length; i++) {
            len += children[i].offsetWidth + 20;
        }
        this.setState({ barWidth: len + 10 })
    }
  
    toProductDetail=(id,name,channelGoodId)=>{  //跳转到相应的商品详情页
        actions.routing.push({
          pathname:'/product-detail-poc',
          search:'?goodId=' + id +"&productName=" + name +"&channelGoodId=" + channelGoodId
        }) 
    }
    tabClick =(code)=>{
        this.setState({
            typeCode:code
        })
        if(code ==1){
            this.requestFusionList();
        }else{
            this.setState({
                productList:[]
            })
        }        
    }

    render() {
        const {productList,bannerList,productTypeList,typeCode,barWidth} = this.state;             
        return (<div className="main product-list bor-top">        

            <div className="yh-logo"><img src="../assets/images/grab/logo_yj.png" /></div>

            <div className="scroll-view">
                <ul className="scroll-bar bor-bottom" id="scrollBar" style={{ width: barWidth }}>
                    {productTypeList.map((item, index) => <li
                        onClick={() => this.tabClick(item.code)}
                        className={"scroll-item fl " + (typeCode == item.code ? "active-grab" : "")}
                        key={index}>{item.name}</li>
                    )}
                </ul>
            </div>
           
            <div className="content-view">              
                <ul id="cardsList">
                    <li className="content-item cards-list-view" >
                        <ul className="card-list">
                            {productList  && productList.map((item, index) =>
                                <div key={index}  className="data">
                                <li className="card" onClick={ ()=>this.toProductDetail(item.marketGoodsId,item.channelGoodsName,item.id) }>                                           
                                    <img className="card-img" src={'fusion/fusion/downloadFile?fileUniqueCode='+item.mainCoverCode} />                                                   
                                    <div className="intro">
                                        <p className="title f30 fc0">{item.channelGoodsName}</p>
                                        <p className="desc f26 fc8">{item.channelGoodsDesc}</p>
                                    </div>
                                </li>                          
                            </div>
                            )}  
                            {productList.length<=0 && 
                                <div className="f30 bgw no-data"> NO Data</div>
                            }                          
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        )
    }
}

export default App;   